<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { ElMessage,ElMessageBox } from 'element-plus';
import { getUserList } from '@/api/user.js';
import { deleteComUser,deleteReferee } from '@/api/admin.js';

const route = useRoute();
const router = useRouter();
const projectId = ref(route.query.projectId);
const userList = ref([]);
const collegeList = ref([])
const classList = ref([])
const refList = ref([])

// 获取用户列表
const list = async () => {
  try {
    const resp = await getUserList(projectId.value);
    if (Array.isArray(resp.data.userList)) {
      userList.value = resp.data.userList;  
      collegeList.value = resp.data.collegeList
      classList.value = resp.data.classList
      refList.value = resp.data.refList
      // console.log(userList.value)
      // console.log(collegeList.value)
      // console.log(classList.value)
      // console.log(refList.value)
      // ElMessage.success("获取名单成功");
    } else {
      console.error("返回的数据不是数组", resp.data.userList);
      ElMessage.error("获取名单失败");
    }
  } catch (error) {
    ElMessage.error("获取数据失败");
  }
};

// 根据ID获取学院名称
const getCollegeName = (id) => {
  const college = collegeList.value.find(col => col.collegeId === id);
  return college ? college.name : '未知学院';
};

// 根据ID获取班级名称
const getClassName = (id) => {
  const cls = classList.value.find(c => c.classId === id);
  return cls ? cls.name : '未知班级';
};

onMounted(() => {
  list();
});

// 移出成员
const removeMember = async (item) => {
  try {
    await ElMessageBox.confirm('确认移出此成员？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteComUser(item.userId,projectId.value);
    // console.log(userId,projectId)
    ElMessage.success('移出成功')
    list();
  } catch (error){
    ElMessage.error('移出失败，请重试')
  }
}

//移出裁判
const removeReferee = async (item) => {
  try {
    await ElMessageBox.confirm('确认移出此裁判？',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteReferee(item.userId,projectId.value);
    // console.log(userId,projectId)
    ElMessage.success('移出成功')
    list();
  } catch (error){
    ElMessage.error('移出失败，请重试')
  }
}

// 颜色生成函数
function getColor(index) {
  const baseColors = ['#85ce61', '#ebb563', '#f78989', '#6b6d71'];
  const alpha = 0.8;
  const colors = baseColors.map(color => {
    const rgb = color.substring(1).match(/.{2}/g).map(hex => parseInt(hex, 16));
    return `rgba(${rgb.join(',')}, ${alpha})`;
  });
  return colors[index % colors.length];
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>参赛人员展示</span>
      </div>
    </template>

    <div class="container" style="min-height: 200px; display: flex; gap: 10px; flex-wrap: wrap;">
      <el-card 
        v-for="(item, index) in userList" 
        :key="index" 
        class="box" 
        :style="{ backgroundColor: getColor(index) }" 
        :body-style="{ padding: '10px' }"
      >
        <h3>{{ item.username }}</h3>
        <p>学院: {{ getCollegeName(item.collegeId) }}</p>
        <p>班级: {{ getClassName(item.classId) }}</p>
        <el-button type="danger" @click="removeMember(item)">移出成员</el-button>
      </el-card>
    </div>

    <div class="header" style="margin-top: 20px;">
      <span>裁判</span>
    </div>
    <div class="container" style="min-height: 200px; display: flex; gap: 10px; flex-wrap: wrap;">
      <el-card 
        v-for="(item, index) in refList" 
        :key="index" 
        class="box" 
        :style="{ backgroundColor: getColor(index) }" 
        :body-style="{ padding: '10px' }"
      >
        <h3>{{ item.username }}</h3>
        <p>学院: {{ getCollegeName(item.collegeId) }}</p>
        <p>班级: {{ getClassName(item.classId) }}</p>
        <el-button type="danger" @click="removeReferee(item)">移出裁判</el-button>
      </el-card>
    </div>

  </el-card>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 200px;
  perspective: 1000px;
}

.box {
  flex: 0 0 150px; /* 定义盒子的宽度 */
  aspect-ratio: 1; /* 保持比例 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
  font-weight: bold;
  padding: 10px;
}

</style>
